<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-page-header :content="$route.meta.title" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" v-loading="loading" shadow="never">
            <div class="mt-4">
                <el-table :data="listData">
                    <el-table-column label="规格名称" prop="name" show-overflow-tooltip align="center"/>
                    <el-table-column label="封面图" prop="cover" show-overflow-tooltip >
                        <template #default="{ row }">
                            <el-image :src="row.cover" style="width: 100px; height: 100px;" :fit="row.cover.includes('http') ? 'cover' : 'contain'"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格" prop="price" show-overflow-tooltip align="center"/>
                    <el-table-column label="单位" prop="unit" show-overflow-tooltip align="center"/>
                    <el-table-column label="商品编码" prop="sku_code" show-overflow-tooltip align="center"/>
                    <el-table-column label="库存" prop="stock" show-overflow-tooltip align="center"/>
                    <el-table-column label="操作" width="120" fixed="right" align="center">
                        <template #default="{ row }">
                             <el-button
                                type="primary"
                                link
                                @click="handleEdit(row)"
                            >
                                编辑
                            </el-button>

                            <el-button
                                type="primary"
                                link
                            >
                            <router-link :to="{ path: getRoutePath('goods.inventoryLog'), query: { id: row.id } }">
                                库存操作日志
                            </router-link>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef"  @success="getListData" @close="showEdit = false" />
    </div>
  </template>
        
  <script lang="ts" setup name="hotelBasicLists">
  import { usePaging } from '@/hooks/usePaging'
  import { goodsSkus } from '@/api/goods'
  import { timeFormat } from '@/utils/util'
  import feedback from '@/utils/feedback'
  import EditPopup from './inventoryEdit.vue'
  import { shallowRef, ref, reactive, nextTick } from 'vue'
  import { useRoute } from 'vue-router'
  import { getRoutePath } from '@/router'
  const route = useRoute()
  const editRef = shallowRef<InstanceType<typeof EditPopup>>()
  // 是否显示编辑框
  const showEdit = ref(false)
  const listData = ref<any[]>([])
  const loading = ref(false)
  // 分页相关
  const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: goodsSkus,
    params: {
        goods_id: route.query.id
    }
  })
  
  // 编辑
  const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(data)
  }
  
const getListData = async () => {
    loading.value = true
    const lists  = await goodsSkus({ goods_id: route.query.id })
    console.log(lists)
    listData.value = lists
    loading.value = false
}
getListData()
  </script>
  
  